<template>
    <van-popup teleport="#app" :show="show" round class="p-3" @click-overlay="closeModal">
        <div class="text-black border-b mb-2">处理代付打款（请使用报备的付款信息打款）</div>
        <div class="text-sm border-b mb-1 py-1">
            <div>系统单号：{{ item.orderNo }}</div>
            <div>商户单号：{{ item.outTradeNo }}</div>
            <div class="flex justify-between">
                <div>通道类型：{{ item.code }}</div>
                <div>银行名称：{{ item.bank }}</div>
            </div>
        </div>
        <div class="text-sm border-b mb-1 py-1">
            <div class="flex justify-between">
                <div>代付金额：<span class="text-[#F07565]">{{ item.amount }}</span></div>
                <div>付款姓名：<span class="text-[#F07565]">{{ item.payName }}</span></div>
            </div>
            <div>付款账号：<span class="text-[#F07565]">{{ item.payAccount }}</span></div>
            <div>抢单时间：{{ dayjs(item.checkTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
            <div>收款二维码：
                <img class="border w-24 h-24 inline" :src="item.payImgSrc" alt="qrcode">
            </div>
        </div>

        <div class="text-sm py-1">
            <div>我报备的代付姓名：{{ item.name }}</div>
            <div>我报备的代付账号：{{ item.account }}</div>
            <div>上传付款凭证详图：
                <div>
                    <van-uploader v-model="fileList" :after-read="afterRead" />
                </div>
            </div>
        </div>

        <form @submit.prevent="submitAdd">
            <div class="text-sm border-b mb-1 pb-1">
                <label>备注：</label>
                <input v-model="formRef.agentRemark" class="w-full p-2 border rounded" placeholder="填写备注" type="text">
            </div>

            <div class="text-center my-2 mt-4 space-y-1">
                <div class="space-x-1">
                    <button @click="showReport = true" type="button"
                        class="rounded bg-[#DEA054] text-white text-sm py-1 px-3">
                        重新选择付款方式
                    </button>
                    <button @click="showTransfer = true" type="button"
                        class="rounded bg-[#DEA054] text-white text-sm py-1 px-3">
                        转让指定代理
                    </button>
                </div>
                <div class="space-x-1">
                    <button @click="cancelOrder" type="button"
                        class="rounded bg-[#EFEFEF] text-black text-sm py-1 px-3">
                        取消订单
                    </button>
                    <button type="submit" class="rounded bg-[#70BABC] text-white text-sm py-1 px-3">
                        确认已打款
                    </button>
                </div>

            </div>
        </form>

        <report-modal :show="showReport" :report="true" :item="item" @confirm="closeModal"
            @close="showReport = false" />
        <transfer-modal :show="showTransfer" :transfer="true" :item="item" @confirm="closeModal"
            @close="showTransfer = false" />
    </van-popup>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { GetReportIndexApi, CancelOrderApi, RemittanceOrderApi } from '@/apis/payment';
import { UploadApi } from '@/apis/user';
import { showDialog, showSuccessToast, showToast } from 'vant';
import dayjs from 'dayjs';
import reportModal from './reportModal.vue';
import transferModal from './transferModal.vue';

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    item: {
        type: Object,
        default: () => { }
    },
    load: {
        type: Function,
        default: () => { }
    }
})

const emit = defineEmits(['close', 'confirm'])

const showReport = ref(false)
const showTransfer = ref(false)

const fileList = ref([])
const codeInfo = ref([])
const formRef = ref({
    orderNo: '',
    agentImgSrc: [],
    agentRemark: ''
})
onMounted(async () => {
    const { list } = await GetReportIndexApi({ page: 1, limit: 1000, reviewStatus: 1 })
    formRef.value.orderNo = props.item.orderNo
    codeInfo.value = list
})

const afterRead = (file: any) => {
    // 此时可以自行将文件上传至服务器
    console.log(file);
    file.status = 'uploading'
    file.message = '上传中...'

    UploadApi(file.file, 1)
        .then((res) => {
            file.status = 'success'
            file.message = '上传成功'
            file.url = res.file.full_url
        })
        .catch(() => {
            file.status = 'error'
            file.message = '上传失败'
        })
};

function cancelOrder() {
    showDialog({
        title: '提示',
        message: '确定取消订单吗？',
        showCancelButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        onConfirm: () => {
            CancelOrderApi(props.item.orderNo).then(() => {
                showSuccessToast({
                    message: '取消成功',
                    duration: 1000
                })
                emit('confirm')
                closeModal();
            })
        }

    })
}

function submitAdd() {
    if (fileList.value.length < 1) {
        showToast({
            message: '请上传图片',
            duration: 1000,
            type: 'fail'
        })
        return;
    }
    formRef.value.agentImgSrc = [];
    fileList.value.forEach(item => {
        formRef.value.agentImgSrc.push(item.url)
    })
    RemittanceOrderApi(props.item.orderNo, formRef.value.agentImgSrc, formRef.value.agentRemark)
        .then(() => {
            showSuccessToast({
                message: '打款成功',
                duration: 1000
            })
            emit('confirm')
            closeModal()
        })
}

function closeModal() {
    emit('close')
}
</script>
<style scoped>
.delete-button {
    height: 100%;
}

:deep(.van-uploader__wrapper) {
    justify-content: center !important;
}

:deep(.van-popover__wrapper) {
    display: block;
}

/* input::placeholder {
    font-size: 12px;
  } */
</style>